<template>
  <div>
    <div v-css:color="'red'"> hello </div>
    <div v-css:fontSize.b.i="'40px'"> hello bold </div>
    <div v-css:fontSize.b="'40px'" v-css:color.i="'red'"> hello </div>
    <hr>
    <BsButton v-css:color="'red'"></BsButton>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import BsButton from './components/BsButton.vue';
/* const vCss = {
  mounted(el, binding) {
    // el.style.color='red'
    el.style[binding.arg] = binding.value;
    if (binding.modifiers.b) {
      el.style.fontWeight = "bold";
    }
    if (binding.modifiers.i) {
      el.style.fontStyle = "italic";
    }
  },
} */

const vCss = function (el, binding) {
  el.style[binding.arg] = binding.value;
  if (binding.modifiers.b) {
    el.style.fontWeight = "bold";
  }
  if (binding.modifiers.i) {
    el.style.fontStyle = "italic";
  }
}

</script>
